<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="88px">
            <el-form-item label="日期：" prop="type">
                <el-date-picker
                       v-model="dateTime"
                       type="month"
                       size="small"
                       value-format="yyyy-MM"
                       @change="onChangeDate"
                       placeholder="选择日期">
                  </el-date-picker>
         </el-form-item>
         <el-form-item label="园所性质：" prop="type">
          <el-select v-model="queryParams.type" placeholder="请选择园所性质" clearable size="small">
            <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
         </el-form-item>
         <el-form-item label="地区类型：" prop="type">
          <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
            <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
         </el-form-item>
         <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
    </el-form>
    <div class="charts"  >
          <div  ref="chartDom" class="chart_dom"></div>
        </div>
    </div>
</template>
<script>
  import moment from "moment";
 export default {
   name: "wssj",
   data() {
     return {
          dateTime:new Date(),
          // 查询参数
          queryParams: {
             nature:'',
             type:''
           },
           charts:null,
           hygieneRate:[
            {name:'园所1',value:97},
            {name:'园所1',value:97},
            {name:'园所1',value:97},
            {name:'园所1',value:97},
           ],
           schoolTypeOptions:[],
           schoolNatureOptions:[],


        }
   },
   created() {
        this.getDicts("park_type").then(response => {
          this.schoolTypeOptions = response.data;
        });
         this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
        });
   },
   mounted(){
        this.getList()
        this.charts = this.$echarts.init(this.$refs.chartDom);
        this.chartsFun();
   },
   methods: {
        async getList(){
        },
        onChangeDate(){
        },
        handleQuery(){
            this.queryParams= {
              nature:'',
              type:''
            },
            this.dateTime=new Date(),
            this.getList()
        },
        resetQuery(){
           this.handleQuery()
        },
        chartsFun(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '各园消杀率统计情况',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         dataZoom:{
           bottom:0,
           show:12/this.hygieneRate.length<1,
           // show:true,
           type:'slider',
           zoomLock:true,
           brushSelect:false,
           height:8,
           // backgroundColor:'#000000',
           handleSize:'0',
           // moveHandleSize:1,
           // moveHandleStyle:{
           //   borderType:'dotted'
           // },
           sow:true,
           xAxisIndex:[0],
           start:0,
           end:12/this.hygieneRate.length*100
         },
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'20%',
              data:this.legendData,
              selected:this.legendSelected
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:30,
               interval: 0,//使x轴文字显示全
              },
              data: this.hygieneRate.map(item=>item.name)
              }
          ],
          yAxis: [
              {
                type: 'value',
                name: "单位: %",
              }
          ],
          color:['#2f89cf','#27d08a'],
          series: [
              {
                  name: '',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.hygieneRate
              },
          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.charts.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
       //地图监听窗口缩放事件
       monitorResize(){
        this.charts.resize();
      },
    }
 };
</script>
<style lang="scss" scoped>
 .charts{
          margin-top: 50px;
          width:100%;
          height: 500px;

            .chart_dom{
                width:95%;
                height: 100%;
                margin-bottom: 50px;
            }
        }
</style>
